<template>
  <div class="right-content">
    <div class="list" v-for="item in navListContent" :key="item._id">
      <p class="title">{{ item.name }}</p>
      <ul class="item-list">
        <li class="item">
          <ul class="item-child-list display-flex">
            <li v-for="child in item.navigations" :key="child._id" class="item-child">
              <a class="link" :href="child.navigation_link" target="_blank">
                <div class="top">
                  <img :src="child.navigation_icon" width="40" height="40" alt="link" />
                  <span class="name">{{ child.navigation_name }}</span>
                </div>
                <span class="desc mellipsis">{{ child.navigation_intro }}</span>
              </a>
              <div class="btn display-flex">
                <router-link :to="{ path: '/navigation-edit/' + child._id }">
                  <p class="edit fz12">编辑</p>
                </router-link>
                <el-popconfirm title="确定删除吗" @confirm="deleteNav(child._id)" @cancel="cancelDelete">
                  <template #reference>
                    <p class="delete fz12">删除</p>
                  </template>
                </el-popconfirm>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getNavContent, deleteNavigation } from '@/api/navigation'

export default {
  name: 'RightContent',
  data() {
    return {
      navListContent: []
    }
  },
  created() {
    this.getRightContent()
  },
  methods: {
    // 获取导航列表
    async getRightContent() {
      try {
        const res = await getNavContent()
        console.log(res)
        if (res.code === 200) {
          this.navListContent = res.data
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 删除导航
    async deleteNav(id) {
      try {
        const res = await deleteNavigation(id)
        if (res.code === 200) {
          this.$message.success({
            message: '删除成功',
            offset: 80
          })
          this.getRightContent()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 取消删除
    cancelDelete() {
      this.$message.info({
        message: '取消删除',
        offset: 80
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.right-content {
  margin-bottom: 30px;
  .title {
    font-size: 16px;
    font-weight: bold;
    color: #252525;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item {
    padding: 10px 10px 10px 0;
    .item-child {
      position: relative;
      width: 188px;
      height: 138px;
      padding: 10px;
      margin-right: 10px;
      margin-bottom: 15px;
      border-radius: 8px;
      background-color: #fff;
      transition: transform 0.3s ease;
      .link {
        display: block;
        padding: 10px;
        color: black;
        border-radius: 8px;
        box-shadow: 0px 0px 11px -4px rgba(55, 84, 106, 0.25);
      }
    }
    .top {
      background-color: #f5f5f5;
      margin-bottom: 10px;
      img {
        border-radius: 50%;
      }
      span {
        margin-left: 5px;
        font-size: 14px;
        color: pink;
        font-weight: 600;
      }
    }
    .item-child-list {
      flex-wrap: wrap;
    }
  }
  .btn {
    position: absolute;
    bottom: 10%;
    right: 50%;
    transform: translateX(50%);
    cursor: pointer;
    .edit {
      color: #5f5f5f;
      margin-right: 15px;
    }
    .delete {
      color: red;
    }
  }
}
</style>
